<template>
	<view class="wrap">
		<js-error mode="bottom" ref="jsError"></js-error>
		
		<view>
			<view class="wrap">
				<u-form class="form" ref="uForm" label-position="left" :model="model" :rules="rules">
					<u-form-item label="机台" prop="lineCode" label-width="180"  style="font-weight: 800;">
						<view>{{ lineCode }}</view>
					</u-form-item>
					
					<u-form-item label="异常类型" prop="errorType" label-width="180" style="color: red;font-weight: 800;" :required="true">
						<js-select v-model="model.errorType" dict-type="mes_error_type" placeholder="请选择选项"></js-select>
					</u-form-item>
					<u-form-item label="异常描述" prop="remarks" label-width="180" style="color: red;font-weight: 800;" :required="true"  label-position="top">
						<u-input placeholder="请输入" v-model="model.remarks" type="textarea" :custom-style="customStyle"  height="100" maxlength="500"></u-input>
					</u-form-item>
					<u-form-item label="图片上传" prop="remarks" label-width="180" style="color: red;font-weight: 800;" :required="true"  label-position="top">
						<js-uploadfile v-model="model.dataMap" :biz-key="model.id" biz-type="line_error_file"></js-uploadfile>
					</u-form-item>
				
				</u-form>
			</view>
			<view class="btn-group cu-bar foot padding" ref="btn-group">
				<!-- round -->
				<!-- <button class="cu-btn  bg-confirm lg margin-left " @click="confirm">确定</button>		 -->
				<js-bpm-button v-model="model.bpm" :biz-key="model.id" form-key="mes_Line_Error" @complete="confirm"></js-bpm-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				focus:true,
				barCode:'',
				model: {
				},
				rules: {
					error_type: [
						{
							required: true,
							message: '请选择异常类型',
							trigger: ['change','blur'],
						}
					],
					remarks: [
						{
							required: true,
							message: '请输入异常描述',
							trigger: ['change','blur'],
						}
					],
				},
				customStyle:{
					color:'red'
				},
				scrollViewHeight: 0,
				currentRW:false,
				emptyViewHeight:0,
				lineCode:''
			}
		},
		mounted() {
			this.calculateScrollViewHeight()
			this.emptyHeight()
		},
		onLoad(e){
			this.lineCode = e.lineCode

		},
		computed: {
		  computedScrollViewHeight() {
		    return this.scrollViewHeight === 'auto' ? 'auto' : `${this.scrollViewHeight}px`;
		  },
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			async calculateScrollViewHeight() {
			  try {
			// 等待头部高度计算完成
			      
			      // 计算btn-group 高度
			      // 获取屏幕高度
			      const systemInfo = uni.getSystemInfoSync();
			      const screenHeight = systemInfo.windowHeight;
				  const btnOffsetHeight = this.$refs['btn-group'] ? this.$refs['btn-group'].$el ? this.$refs['btn-group'].$el.offsetHeight : 0 : 0;;
				//   const cuBarOffsetHeight = this.$refs['cu-bar'].$el.offsetHeight;
				const cuBarOffsetHeight = 0;
				  console.log(screenHeight,btnOffsetHeight,cuBarOffsetHeight,'===')
			      // 计算scroll-view高度
			      this.scrollViewHeight = screenHeight - ( btnOffsetHeight + cuBarOffsetHeight + 60 );
			  } catch (error) {
			    console.error('Error while calculating ScrollView height:', error);
			  }
			},
			async emptyHeight() {
			  try {
			// 等待头部高度计算完成
			      
			      // 计算btn-group 高度
			      // 获取屏幕高度
			      const systemInfo = uni.getSystemInfoSync();
			      const screenHeight = systemInfo.windowHeight;
				//   const cuBarOffsetHeight = this.$refs['cu-bar'].$el.offsetHeight;
				const cuBarOffsetHeight = 0;
			      // 计算scroll-view高度
			      this.emptyViewHeight = screenHeight - cuBarOffsetHeight;
			  } catch (error) {
			    console.error('Error while calculating ScrollView height:', error);
			  }
			},
			confirmSearch(){
				if(this.barCode){
					this.currentRW = true;
				}
			},
			search(){
				var _that = this;
				_that.focus = false
				uni.scanCode({
					scanType: ["barCode", "qrCode"],
					// onlyFromCamera: true,
					success: function(res) {
						_that.barCode = res.result;
					},
				});
			},
			searchOperator(){
				var _that = this;
				_that.focus = false
				uni.scanCode({
					scanType: ["barCode", "qrCode"],
					// onlyFromCamera: true,
					success: function(res) {
						_that.model.operator = res.result;
					},
				});				
			},
			DateChange(date,e) {
			  this.model[date] = e.detail.value;
			  this.$forceUpdate();
			},
			confirm(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.model.lineCode = this.lineCode
						// console.log(valid,'valid',this.model)
						this.$u.api.kst.mesLineErrorSave(this.model).then(res=>{
							if(res.result == 'true'){
								this.$u.toast('保存成功')
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 500);
							}else{
								// this.$u.toast(res.message)
								this.$refs.jsError.showError('',res.message,'error');
								return;
							}

						})
					} else {
						this.$u.toast('您填写的信息有误，请根据提示修正。');
					}
				});
			}
		}
	}	
</script>

<style scoped lang="scss">
	.title{
		width: 180rpx;
	}
	.bg-confirm {
	  background: #3e97b0;
	  color: #ffffff;
	}
	.cu-bar.foot{
		z-index: 998 !important;
	}
	/deep/.u-drawer-content{
		height: 40% !important;
	}
</style>